import { Card, Col, Row, Breadcrumb} from "antd";
import { useNavigate } from "react-router-dom";
import "./index.scss";
import Bar from "../../../components/Cumulative/dit";
import Bfb from "../../../components/Cumulative/bfb";
import http from "../../../utils/http";
import { useState, useEffect } from "react";

const CumulativeOverview = () => {
  //跳转
  const navigate = useNavigate();

  //地图
  const [Tname, setTame] = useState("新都区");
  const [dataIns, setDataIns] = useState("");
  const getName = (name: any) => {
    console.log("城市名字", name);
    http({
      url: "/getEachIns",
      params: {
        oaddress: name,
      },
    }).then((res: { [key: string]: any }) => {
      console.log('查询00000000',res);
      if (res.error == 0) {
      console.log('查询查询',res);
      let einum=res.data[0].eachins;
      console.log('einum',einum);
      setDataIns(einum)
      }
    });
    setTame(name);
  };
  const getName2 = ()=>{
    http({
      url: "/getEachIns",
      params: {
        oaddress:'新都区',
      },
    }).then((res: { [key: string]: any }) => {
      console.log('查询00000000',res);
      if (res.error == 0) {
      console.log('查询查询',res);
      let einum=res.data[0].eachins;
      console.log('einum',einum);
      setDataIns(einum)
      }
    });
  }
  useEffect(() => {
    getName2();
  }, []);

  //获取培训机构数目
  const [data1, setData1] = useState("");
  const getData1 = () => {
    http({
      url: "/getInstitutionNum",
    }).then((res) => {
      console.log("返回的数据", res);
      let dataust = res.data[0].inum;
      setData1(dataust);
      console.log("----data1", data1);
    });
  };
  useEffect(() => {
    getData1();
  }, []);

  //获取老师数目
  const [data2, setData2] = useState("");
  const getData2 = () => {
    http({
      url: "/getTeacherNum",
    }).then((res) => {
      console.log("返回的数据", res);

      let tea = res.data[0].tnum;
      setData2(tea);
    });
  };
  useEffect(() => {
    getData2();
  }, []);

  // 获取学生数目
  const [data3, setData3] = useState("");
  const getData3 = () => {
    http({
      url: "/getStuNum",
    }).then((res) => {
      console.log("返回的数据", res);
      let stu = res.data[0].snum;
      setData3(stu);
      console.log("----data3", data3);
    });
  };
  useEffect(() => {
    getData3();
  }, []);


  // 跳转1
  const toins = () => {
    navigate(`/home/Training`);
  };

  // 跳转2
  const toins1 = () => {
    navigate(`/home/TeacherManage`);
  };

  // 跳转3
  const toins2 = () => {
    navigate(`/home/studentFiling`);
  };

  // 跳转4
  const toins3 = () => {
    navigate(`/home/NewCourse`);
  };

  return (
    <div className="CumulativeOverview">
      {/* 最上面 */}
      <div className="Bre">
        <Breadcrumb separator=" ">
          <Breadcrumb.Item>
            <span className="br1">累计概况</span>
          </Breadcrumb.Item>
        </Breadcrumb>
        <div className="im">
        </div>
      </div>

      <div className="ax_default">
        <Row justify={"space-between"}>
          <Col span={5}>
            <Card hoverable onClick={toins}>
              <div className="ax-box">
                <div className="axf ax-l">
                  <img
                    src="https://img.axureshop.com/07/b8/9b/07b89b58b7ef43ddb3340e5ed6e394be/images/%E7%B4%AF%E8%AE%A1%E6%A6%82%E5%86%B5/u338.png"
                    alt=""
                  />
                  <span>培训机构</span>
                </div>
                <div className="axf ax-r">
                  <span className="sz" style={{ color: "#FC6180" }}>
                    {data1}
                  </span>
                  <span style={{ fontSize: "12px", color: "#A8B4C4" }}>
                    累计备案总数
                  </span>
                </div>
              </div>
            </Card>
          </Col>
          <Col span={5}>
            <Card hoverable onClick={toins1}>
              <div className="ax-box">
                <div className="axf ax-l">
                  <img
                    src="https://img.axureshop.com/07/b8/9b/07b89b58b7ef43ddb3340e5ed6e394be/images/%E7%B4%AF%E8%AE%A1%E6%A6%82%E5%86%B5/u367.png"
                    alt=""
                  />
                  <span>教学老师</span>
                </div>
                <div className="axf ax-r">
                  <span className="sz" style={{ color: "#FFB64D" }}>
                    {data2}
                  </span>
                  <span style={{ fontSize: "12px", color: "#A8B4C4" }}>
                    累计备案总数
                  </span>
                </div>
              </div>
            </Card>
          </Col>
          <Col span={5}>
            <Card hoverable onClick={toins2}>
              <div className="ax-box">
                <div className="axf ax-l">
                  <img
                    src="https://img.axureshop.com/07/b8/9b/07b89b58b7ef43ddb3340e5ed6e394be/images/%E7%B4%AF%E8%AE%A1%E6%A6%82%E5%86%B5/u383.png"
                    alt=""
                  />
                  <span>备案学生</span>
                </div>
                <div className="axf ax-r">
                  <span className="sz" style={{ color: "#4A90E2" }}>
                    {data3}
                  </span>
                  <span style={{ fontSize: "12px", color: "#A8B4C4" }}>
                    累计备案总数
                  </span>
                </div>
              </div>
            </Card>
          </Col>
          <Col span={5}>
            <Card hoverable onClick={toins3}>
              <div className="ax-box">
                <div className="axf ax-l">
                  <img
                    src="https://img.axureshop.com/07/b8/9b/07b89b58b7ef43ddb3340e5ed6e394be/images/%E7%B4%AF%E8%AE%A1%E6%A6%82%E5%86%B5/u353.png"
                    alt=""
                  />
                  <span>培训课程</span>
                </div>
                <div className="axf ax-r">
                  <span className="sz" style={{ color: "#38C5CB" }}>
                    {data1}
                  </span>
                  <span style={{ fontSize: "12px", color: "#A8B4C4" }}>
                    累计备案总数
                  </span>
                </div>
              </div>
            </Card>
          </Col>
        </Row>
      </div>

      <div className="qx">
        <Card className="card">
          <div style={{ display: "flex", justifyContent: "space-between" }}>
            <div className="je">
              <Bar getNmae={getName} />
            </div>
            <div className="le">
              <h1>{Tname}</h1>
              <p>累计备案数与占全市比例</p>
              <div style={{ display: "flex", justifyContent: "space-evenly" }}>
                <Bfb point={dataIns} digital={data1} name="培训机构" />
                <Bfb point={dataIns} digital={data1} name="培训课程" />
              </div>
            </div>
          </div>
        </Card>
      </div>
    </div>
  );
};
export default CumulativeOverview;
